<template>
	<view class = "orderList">
		<view class="fixed">
			<view class="header">
				<image @tap = "backMine" src="../../../../assets/images/arr-l.png" mode=""></image>
				<text>订单列表</text>
			</view>
			<view class="kind">
				<view @tap="show=0"  :class ="{active:show==0}">待付款</view>
				<view @tap="show=1"  :class ="{active:show==1}">已付款</view>
				<view @tap="show=2"  :class ="{active:show==2}">已发货</view>
				<view @tap="show=3"  :class ="{active:show==3}">已收货</view>
				<view @tap="show=9"  :class ="{active:show==9}">申请退款</view>
			</view>
			<view class="orderinfo" v-for="item in showList" :key = "item.id">
				<view class="headers">
					<text>订单编号:{{item.orderId}}</text>
					<!-- <text v-if="show!== 9">{{item.status}}</text>
					<text v-if="show == 9">{{item.process}}</text> -->
				</view>
				<view class="skuinfos" v-for = "items in item.subList" :key="items.orderId">
					<view class="left">
						<image :src="items.cover_img" mode=""></image>
					</view>
					<view class="middle">
						<text>{{ items.gname }}</text>
						<text>编号:{{ items.sku_code }}</text>
						<text>规格:{{ items.color_text}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "../../../../utils/http.js"
	export default {
		data() {
			return {
				show:"",
				userId:"", // 用户id
				orderList:[],
				orderBackList:[],
				// showList:[],
			};
		},
		computed:{
			// 通过订单列表的状态0,1,2,3,9的切换状态
			showList(){
				if(this.show == 9){
					return this.orderBackList;
				}
				return this.orderList.filter(item=> item.status == this.show)
			}
			
		},
		methods:{
			backMine(){
				uni.switchTab({
					url:"/pages/mine/mine"
				})
			},
		},
		onLoad(options) {
			console.log(options);
			this.show = options.id;
			this.userId = JSON.parse(uni.getStorageSync("token")).id
			console.log(this.userId);
			http.get("/api/leju/front/order/list",{
				userId:this.userId
			}).then(res =>{
				this.orderList = res.data.data.list;
				console.log(this.orderList);
			});
			//退单列表
			http.get("/api/leju/front/order/orderBackList",{
				userId:this.userId
			}).then(res=>{
				this.orderBackList = res.data.data;
				console.log(this.orderBackList);
			})
		}
	}
</script>

<style lang="scss">
	
	.orderList{
		width:750rpx;
		height: 100vh;
		background:wheat;
		.fixed{
			width:100%;
			height: 160rpx;
			position:fixed;
			left:0;
			top:0;
			z-index:999;
		}
		.header{
			width:100%;
			height: 80rpx;
			background: #5D4E49;
			padding:0.1rpx;
			image{
				position:absolute;
				left:33rpx;
				top:28rpx;
				width:24px;
				height: 38rpx;
			}
			text{
				display:block;
				width:200rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align:center;
				font-weight:bolder;
				color:white;
				margin:0 auto;
				margin-top:20rpx;
				font-size:40rpx;
			}
		}
		.kind{
			width:100%;
			height: 80rpx;
			display:flex;
			justify-content: space-around;
			align-items: center;
			background: #5D4E49;
			color:white;
			.active{
				color:red;
				border-bottom:2rpx solid red;
				padding-bottom:25rpx;
				font-size:40rpx;
			}
		}
		.skuinfos .left {
			width:100rpx;
			height: 100rpx;
			image{
				width:100%;
				height: 100%;
			}
		}
	}
	
</style>
